<template>
    <!-- /manage/user/list -->
    <div class="common-layout">
        <el-container>
            <el-header class="topheader" height="50">
                <el-row>
                    <el-col :span="1">LOGO</el-col>
                    <el-col :span="4" :offset="19" class="t">
                        <!-- 欢迎{{store.state.userStore.UserInfo.username}}  -->
                        欢迎{{ username }}
                        <el-button size="small" @click="logOut">退出登录</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <el-menu :default-active="defaultMenu" class="left-menu" :router="true">
                        <template v-for="m in menus">
                            <el-sub-menu :index="m.path" v-if="ishowPermission(m.name)">
                                <template #title>
                                    <el-icon>
                                        <component :is="m.icon"></component>
                                    </el-icon>
                                    <span>{{ m.title }}</span>
                                </template>
                                <template v-for="ms in m.child">
                                    <el-menu-item v-if="ishowPermission(m.name,ms.name)" :index="`/manage/${m.path}/${ms.path}`">
                                        <el-icon>
                                            <component :is="ms.icon"></component>
                                        </el-icon>
                                        <span>{{ ms.title }}</span>
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 子路由的组件渲染显示出口 -->
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="b in route.matched" :to="`${b.path}`">{{ b.meta.title }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view v-slot="{ Component, route }">
                        <Transition>
                            <Suspense :key="route.fullPath + Math.random()">
                                <component :is="Component" :key="route.fullPath + Math.random()"></component>
                            </Suspense>
                        </Transition>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { reactive, ref, computed, watch, watchEffect } from 'vue';
// import { useStore } from 'vuex'
import useUserStore from '../store/useUserStore'
import { useRoute } from 'vue-router';
import _ from 'lodash'
// let store = useStore();//创建store对象 this.$store
let store=useUserStore();
let route = useRoute();//获取route对象  this.$route
let username = computed(() => store.UserInfo.username);//把store里面的state写成计算属性
let logOut = () => {
    // store.commit("userStore/logOut");
    store.logOut();
}
let defaultMenu = ref("");
// defaultMenu.value = computed(()=>route.path);
watchEffect(() => {//侦听路由变化  watchEffect watch
    defaultMenu.value = route.path;
})
// watch(route.path,()=>{})
// console.log("route 对象+==》",route)
let menus = reactive([
    {
        title: "面试题管理", name: "iq", path: "question", icon: "Reading", child: [
            { title: "添加面试题", name: "create", path: "add", icon: "DocumentAdd" },
            { title: "面试题列表", name: "query", path: "list", icon: "Document" }
        ]
    },
    {
        title: "答案管理", name: "answer", path: "answer", icon: "Notebook", child: [
            { title: "添加答案", name: "create", path: "add", icon: "DocumentAdd" },
            { title: "答案列表", name: "query", path: "list", icon: "Document" }
        ]
    },
    {
        title: "分类管理", name: "category", path: "category", icon: "Grid", child: [
            { title: "添加分类", name: "create", path: "add", icon: "DocumentAdd" },
            { title: "分类列表", name: "query", path: "list", icon: "Document" }
        ]
    },
    {
        title: "用户管理", name: "user", path: "user", icon: "UserFilled", child: [
            { title: "添加用户", name: "create", path: "add", icon: "DocumentAdd" },
            { title: "用户列表", name: "query", path: "list", icon: "Document" },
            { title: "权限列表", name: "auth", path: "auth", icon: "Document" }
        ]
    }
]);
let ishowPermission = (topname, subname = false) => {
    // v-if="ishowPermission(m.name)"
    // let permissions = store.state.userStore.permissions && store.state.userStore.permissions.role.permissions;
    if(!store.Permissions || !store.Permissions.role) return false;
    let permissions=store.Permissions&&store.Permissions.role.permissions;
    // console.log("permissions===>",permissions);
    if (subname) {//二级菜单
        if (permissions&&permissions[topname] != undefined && permissions[topname][subname]) {
            return true;
        }
        return false;
    } else {//判断一级菜单
        if (permissions&&permissions[topname] === undefined) return false;
        if (permissions&&_.isEmpty(permissions[topname])) return false;
        return true;
        // user:{} 判断 user为空???// let user={};// let user=[]; //length 用length判断// if(user){ }//条件是成立.
    }
}
</script>
<style lang="scss" scoped>
.topheader {
    background-color: gray;
    line-height: 50px;
    color: white;

    .t {
        font-size: 12px;
    }
}

.left-menu {
    height: calc(100vh - 50px);
}

.v-enter-from {
    transform: translateX(-100%);
}

.v-enter-to {
    transform: translateX(0%);
}

.v-enter-active {
    transition: all 0.5s linear;
}
</style>